<template>
	<view class="unloadEdit">
		<!-- 顶部标签 -->
		<view class="tab">
			<view :class="tabActive==1?'tab_i tab_i_active':'tab_i'" @click="clickTab(1)">运单信息</view>
			<view :class="tabActive==2?'tab_i tab_i_active':'tab_i'" @click="clickTab(2)">卸货信息</view>
		</view>
		<template v-if="this.msgForm">
			<!-- 内容1 -->
			<view class="cont" v-show="tabActive==1">
				<view class="cont_item">
					<view class="title">卸货企业信息</view>
					<view class="cont_item_row">
						<view class="row_l">卸货企业</view>
						<view class="row_r">{{msgForm.unloadingCorpName}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">所在行政区划</view>
						<view class="row_r">{{getSelectPath(msgForm.unloadingZipCode)}}</view>
					</view>
				</view>
				<view class="cont_item">
					<view class="title">承运信息</view>
					<view class="cont_item_row">
						<view class="row_l">承运企业</view>
						<view class="row_r">{{msgForm.carriageName}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">承运车辆</view>
						<view class="row_r">{{msgForm.vehCode || '-'}}/{{msgForm.trailerVehCode || '-'}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">驾驶员</view>
						<view class="row_r">{{msgForm.driverName}}</view>
					</view>
					<view class="cont_item_row">
						<view class="row_l">押运员</view>
						<view class="row_r">{{msgForm.escortName}}</view>
					</view>
				</view>
				<view class="cont_btn">
					<view @click="clickTab(2)">下一步</view>
				</view>
			</view>

			<!-- 内容2 卸货信息 -->
			<view class="cont" v-show="tabActive==2">
				<view class="cont_item">
					<view class="title">卸货信息</view>

					<u--form labelPosition="left" :rules="rules" :model="msgForm" labelWidth="160rpx" ref="msgForm">
						<u-form-item required label="货物名称" prop="dgsName">
							<u--input v-model="msgForm.dgsName" :disabled="changeType=='0'"
								disabledColor="#fff"></u--input>
						</u-form-item>
						<!-- <u-form-item required label="货物名称" prop="name" v-else>
							<u-picker :show="pickerShow1" :columns="msgForm.goodsInfos" keyName="goodsName" :defaultIndex="msgForm.goodsInfos"></u-picker>
						</u-form-item> -->
						<u-form-item required label="卸货重量" prop="goodsWeight" v-if="changeType!=='2'">
							<u-input v-model="msgForm.goodsWeight" :disabled="changeType=='0'" disabledColor="#fff">
								<span slot="suffix">吨</span>
							</u-input>
						</u-form-item>
						<u-form-item required label="卸货重量" prop="dischargeWeight" v-else>
							<u-input v-model="msgForm.dischargeWeight" :disabled="changeType=='0'" disabledColor="#fff">
								<span slot="suffix">吨</span>
							</u-input>
						</u-form-item>

						<u-form-item required label="卸货员" prop="dischargeUserName">
							<u--input v-model="msgForm.dischargeUserName" :disabled="changeType=='0'"
								disabledColor="#fff">
							</u--input>
						</u-form-item>
						<u-form-item required label="身份证号" prop="dischargeUserIdCard">
							<u--input v-model="msgForm.dischargeUserIdCard" :disabled="changeType=='0'"
								disabledColor="#fff"></u--input>
						</u-form-item>
						<u-form-item required label="卸货地点" prop="dischargeAddress">
							<u--input v-model="msgForm.dischargeAddress" :disabled="changeType=='0'"
								disabledColor="#fff">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="cont_btn">
					<view @click="clickTab(1)">上一步</view>
					<view @click="goBack" v-if="changeType=='0'">返回</view>
					<view @click="changeSave" v-if="changeType=='1'">保存</view>
					<!-- 填报 -->
					<view @click="fillSave" v-if="changeType=='2'">保存</view>
				</view>
			</view>
		</template>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getSelectPath
	} from '@/common/util.js';
	export default {
		data() {
			return {
				msgForm: {},
				// 当前标签
				tabActive: 1,
				pickerShow1: false,

				rules: {
					'goodsWeight': {
						type: 'float',
						required: true,
						message: '请填写重量',
						trigger: ['blur', 'change']
					},
				},
				changeType: null,
			};
		},
		onLoad(option) {

		},
		mounted() {
			let loadRow = this.$store.state.unloadFillData
			console.log(loadRow, 'loadRow----------');
			this.changeType = loadRow.changeType
			//判断查看/修改/填报
			if (loadRow.changeType == '2') {
				//填报
				this.msgForm = loadRow
			} else {
				//默认查询
				this.getData({
					id: loadRow.id
				})
			}
		},
		methods: {
			getSelectPath(zipCode) {
				let obj = getSelectPath(zipCode);
				if (obj && obj.text) {
					return obj.text;
				}
				return zipCode;
			},
			clickTab(num) {
				this.tabActive = num
			},
			getData(row) {
				this.$api.getunLoadDetail(row).then(res => {
					console.log(res, '卸货详情');
					this.msgForm = res.data.data
				})
			},
			//修改
			changeSave() {
				this.$api.setunLoadQuery(this.msgForm).then(res => {
					console.log(res, '卸货修改');
					this.$refs.uToast.show({
						type: res.data.code == '200' ? 'success' : 'error',
						message: res.data.msg,
						//回调
						complete: () => {
							if (res.data.code == '200') {
								this.$goBack(1, 1)
							}
						}
					})
				})
			},
			//返回
			goBack() {
				this.$goBack(1, 1)
			},
			//填报
			fillSave() {
				this.$api.setunLoadFill(this.msgForm).then(res => {
					console.log(res, '卸货填报');
					this.$refs.uToast.show({
						...{
							type: res.data.code == '200' ? 'success' : 'error',
							message: res.data.msg
						},
						//回调
						complete: () => {
							if (res.data.code == '200') {
								this.$goBack(1, 1)
							}
						}
					})
				})
			}
		},

	}
</script>

<style lang='scss' scoped>
	.unloadEdit {}

	.tab {
		width: 100%;
		height: 90rpx;
		background-color: #007AFF;
		line-height: 90rpx;
		display: flex;
		justify-content: space-around;

		.tab_i {
			color:#fff;
			font-size: 28rpx;
		}

		.tab_i_active {
			font-weight: 800;
			position: relative;
		}

		.tab_i_active::after {
			position: absolute;
			content: '';
			bottom: 0;
			left: 0;
			width: 100%;
			height: 4rpx;
			background: #fff;
		}
	}

	.cont {
		.cont_item {
			width: calc(100% - 60rpx);
			border-bottom: 2rpx solid #DDDDDD;
			padding: 20rpx 30rpx;

			.title {
				padding: 0 20rpx;
				width: calc(100% - 40rpx);
				position: relative;
				margin: 20rpx 0;
				color: #007AFF;
				font-size: 30rpx;
			}

			.title::before {
				position: absolute;
				content: '';
				width: 4rpx;
				height: 100%;
				background-color: #007AFF;
				top: 0;
				left: 0;
			}

			/* 左右内容结构 */
			.cont_item_row {
				width: 100%;
				display: flex;
				padding: 10rpx 0;
				font-size: 28rpx;

				.row_l {
					width: 210rpx;
				}

				.row_r {
					flex: 1;
				}
			}

			/* 安全检查 单选框 */
			.cont_item_two {
				width: 100%;

				.two_text {
					width: 100%;
					padding: 10rpx 0;
					font-size: 28rpx;
				}

				.two_radio {
					width: calc(100% - 40rpx);
					padding: 10rpx 20rpx;

					::v-deep .u-radio-group {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}

		.cont_btn {
			width: 100%;
			margin-top: 60rpx;
			display: flex;
			justify-content: space-around;

			view {
				width: 190rpx;
				height: 50rpx;
				background: #007AFF;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 28rpx;
			}
		}
	}
</style>